<template>
  <div class='staffList' >
      <el-row class='first-title'>
        <div class="lf">
          <h3 class="">{{searchDeptCategory}}</h3>
        </div>
        <search-box @getValue="getSearchText" :text="text"></search-box>
      </el-row>
      <el-row class="second-sec">
        <div class="display-title">
          <div class="rt select-dept">
              <span>请选择部门：</span>
              <el-select  v-model="leaderSec" @change="getLeaderSecList" placeholder="请选择">
                <el-option
                v-for="item in unitList"
                :key="item.deptid"
                :label="item.descr"
                :value="item.descr">
                </el-option>
              </el-select>
          </div> 
        </div>
      </el-row>
      <el-row class="third-card">
        <div class="totalNum">
            &nbsp;
            <div class="rt">共计<strong>{{totalNum}}</strong>人</div>
        </div>
        <div class="table-container">
            <div class="collapse-card">
                <h3 class="box-title">
                    员工列表（共{{totalNum}}人）
                </h3>
                <div class="collapse-container pull-right">
                    <a class="collapse" @click="collpseCard" data-widget="collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="handle-table">
               <!--<a :href="downloadTable" v-if="downloadTable"  class="downloadTable"><i class="fa fa-file-excel-o"></i> 导出简表</a>-->
                &nbsp;
               <div class="rt selectSet">
                  <a @click="showColList" class="default" title="自定义列"><i class="fa fa-th" aria-hidden="true"></i><span class="caret"></span></a>
                  <search-col :ifShow.sync='colShow' :checkedCities.sync="checkedCities" :cities="colTotalList" @changeCol="getCheckedArr"></search-col>
               </div>
            </div>
            <div class="tableDiv">
                <el-table
                    :data="unitTableList"
                    style="width: 100%"
                    :fit="tablefit"
                    :row-class-name="handleRowClass"
                    border
                    >
                    <!-- <el-table-column
                        :prop="item.prop"
                        :class-name="item.class"
                        :label="item.label"
                        :min-width="item.width"
                        width="80"
                        :key="item.prop"
                        v-if="item.isShow"
                        v-for='item in tableOption'>
                        <template  scope="scope">
                        <a v-if="item.needAtag" target="_blank" class="resumePeo"  @click="targetLeaderRoute(scope)">{{scope.row.name}}</a>
                        <span v-else>{{handleData(scope,item)}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        :prop="item.prop"
                        :class-name="item.class"
                        :label="item.label"
                        :width="item.width"
                        :key="item.prop"
                        v-if="item.isShow"
                        v-for='item in tableOption'>
                    </el-table-column>
                </el-table>
                <div class="paginationDiv">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10,20,50,100, 200]"
                    :page-size.sync="pageSizeTable"
                    layout="total,sizes,prev, pager, next"
                    :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
      </el-row>
  </div>
</template>

<script>
import Vue from 'vue'
import { ButtonGroup, Switch, Select, Input, Col, Row, Radio, RadioGroup, RadioButton, Option, Table, TableColumn, Form, FormItem, Pagination } from 'element-ui'
Vue.use(ButtonGroup)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(Option)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Pagination)
import cardLeader from '@/components/public/card-memeber'
import searchBox from '@/components/public/search-box'
import searchCol from '@/components/public/selectShowCol'
export default {
    data () {
        return {
            value1: null,
            value2: null,
            value3: null,
            radio3: '员工列表',
            unitList: [],
            leaderSec: '',
            loading: false,
            text: '请输入姓名、员工编号搜索',
            searchRecord: null,
            searchText: '',
            searchDeptCategory: '',
            deptDescr: null,
            isLoadEnd: false,
            checkedCities: [0, 1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
            colShow: false,
            cardList: [],
            totalNum: null,
            showTable: true,
            tablefit: true,
            englishTitle: null,
            title: null,
            tableOption: null,
            colTotalList: null,
            currentPage: 1,
            pageSizeTable: 20,
            totalTableNum: null,
            unitTableList: null,
            cardPageSize: 20,
            cardPageNum: 1,
        }
    },
    methods: {
        formatDate: function (data) {
            for (let i = 0; i < data.length; i++) {
                data[i].num = i + 1;
                let time = data[i].birthdate;
                data[i].birthdate = time.split(' ')[0];
                time = data[i].service_dt;
                data[i].service_dt = time.split(' ')[0];
                time = data[i].start_dt_chn;
                data[i].start_dt_chn = time.split(' ')[0];
            }
            return data
        },
        handle: function (scope) {
            var emplid = scope.row.emplid;
            this.$router.push('/resume?emplid=' + emplid);
        },
        targetLeaderRoute: function (scope) {
            var emplid = scope.row.emplid;
            window.open("/module/resume.html?emplid=" + emplid);
        },
        clearData: function () {
            this.cardList = [];
            this.unitTableList = [];
            this.cardPageNum = 1;
            this.currentPage = 1;
            this.isLoadEnd = false;
        },
        selectAjax: function () {
            if (this.radio3 === "员工名片") {
                if (this.searchRecord) {
                    var params = {
                        search: this.searchText,
                        pageSize: 1000,
                        pageNum: this.cardPageNum
                    }
                    this.PostAjax(this.URL.employeeSearch.url, params, 3);
                } else {
                    this.getLeaderListCommonAjax()
                }
            } else if (this.radio3 === "员工列表") {
                if (this.searchRecord) {
                    var params = {
                        search: this.searchText,
                        pageSize: this.pageSizeTable,
                        pageNum: this.currentPage
                    }
                    this.PostAjax(this.URL.employeeSearch.url, params, 3);
                } else {
                    this.getLeaderListCommonAjax(2)
                }
            }
        },
        getSearchText: function (text) {
            var self = this;
            if (!text) {
                this.clearData();
                this.searchRecord = false;
                this.selectAjax();
                return;
            }
            this.searchText = text.trim();
            this.cardPageNum = 1;
            this.searchRecord = true;
            this.selectAjax();
        },
        handleRowClass: function (row, index) {
            return index % 2 === 0 ? 'even-row' : 'odd-row';
        },
        dataNeedFunc: function (prop) {
            return prop === "service_dt" || prop === "birtc_cur_job_dthdate" || prop === "birthdate" || prop === "start_dt_chn";
        },
        handleData: function (scope, item) {
            return
            var prop = item.prop;
            switch (true) {
                case prop === 'num':
                    return (this.currentPage - 1) * this.pageSizeTable + scope.$index + 1;
                    break;
                case this.dataNeedFunc(prop):
                    var value = scope.row[item.prop].split(" ")[0];
                    return value;
                    break;
                default:
                    return scope.row[item.prop];
            }
        },
        getCheckedArr (value) {

            if (value.length) {
                var arr = []
                value = JSON.parse(JSON.stringify(value));
                value.sort(function (a, b) {
                    return a - b;
                });
                for (var i = 0, len = value.length; i < len; i++) {
                    arr.push(this.colTotalList[value[i]]);
                }
                this.tableOption = JSON.parse(JSON.stringify(arr));

                this.assignTitles();
            }
        },
        concatStr: function (data) {
            let ret = ''
            for (let it in data) {
                ret += it + '=' + data[it] + '&'
            }
            return ret;
        },
        assignTitles: function () {
            var title = '', englishTitle = '';

            if (this.tableOption[0].prop !== "num") {
                title += "序号";
            }
            for (var j = 0; j < this.tableOption.length; j++) {
                title = title ? title + ',' + this.tableOption[j].label : title + this.tableOption[j].label;
                if (this.tableOption[j].prop !== "num") {
                    englishTitle = englishTitle ? englishTitle = englishTitle + ',' + this.tableOption[j].prop : englishTitle + this.tableOption[j].prop;
                }
            }
            this.title = title;
            this.englishTitle = englishTitle;
        },
        showColList: function () {
            this.colShow = this.colShow ? false : true;
        },
        getLeaderSecList: function (value) {
            var self = this;
            if (value === "全部") {
                this.clearData();
                value = "";
            }
            this.clearData();
            this.leaderSec = value;
            var type;
            if (value) { type = "1"; }
            this.getLeaderListCommonAjax(type);
        },
        collpseCard: function (unit) {
            unit.show = unit.show ? false : true;
        },
        getLeaderListCommonAjax: function (type) {
            var self = this;
            var params = type === 2 ?
                {
                    employeeId: "",
                    deptCategory: '',
                    deptDescr: this.leaderSec,
                    name: this.searchText,
                    pageSize: this.pageSizeTable,
                    pageNum: this.currentPage
                }
                :
                {
                    employeeId: "",
                    deptCategory: '',
                    deptDescr: this.leaderSec,
                    name: this.searchText,
                    pageSize: this.cardPageSize,
                    pageNum: this.cardPageNum
                };
            this.PostAjax(this.URL.getEmpListByService.url, params, type);
        },
        PostAjax: function (url, params, type) {
            var self = this;
            if (type === 3) {
                this.searchRecord = true;
            } else {
                this.searchRecord = false;
            }
            this.Axios.Post(url, params).then(function (res) {
            	
            		//部门列表
		            var arr = res.data.datas.deptlist;
		            arr && arr.unshift({ "descr": "全部", "total": 1, "deptid": "" })
		            self.unitList = arr;
            	
            	
            	
                self.totalNum = (res.data.page && res.data.page.total) || res.data.total || 0;
                var arr1 = JSON.parse(JSON.stringify(res.data.datas.emplist));
                if (type === 2 || self.radio3 !== "员工名片") {
                    self.unitTableList = JSON.parse(JSON.stringify(arr1));
                    self.totalTableNum = self.unitTableList.length;
                    self.unitTableList = self.formatDate(self.unitTableList)
                } else {
                    if (self.searchRecord) {
                        self.cardList = arr1;
                    } else {
                        self.cardList = self.cardList.concat(arr1);
                        if (self.cardList.length === self.totalNum) {
                            self.isLoadEnd = true;
                        }
                    }
                }
            })
        },
        // type===2 代表简表请求
        handleSizeChange (val) {
            this.pageSizeTable = val;
            this.selectAjax();
        },
        handleCurrentChange (val) {
            this.currentPage = val;
            this.selectAjax();
        },
        scrollFunc: function (event) {
            var self = this;
            if (this.radio3 !== "员工名片" || this.searchRecord || this.isLoadEnd) {
                return;
            }
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            if (document.documentElement.scrollHeight - (document.documentElement.clientHeight + scrollTop) == 0) {
                self.cardPageNum++;
                self.selectAjax();
            }
        }
    },
    computed: {
        downloadTable () {
            var params = {
                deptCategory: this.searchDeptCategory,
                name: this.searchText,
                token: sessionStorage.getItem('token'),
                deptDescr: this.leaderSec,
                title: this.title,
                englishTitle: this.englishTitle,
            }
            return this.Axios.baseURI + '/excel/departmentExport?' + this.concatStr(params);
        }
    },
    created: function () {
        var self = this;
        self.colTotalList = [
            { label: '序号', prop: "num", isShow: true, width: '70', needAtag: false, fixed: 'left' },
            { label: '单位', prop: "business_descr", isShow: true, width: '200', needAtag: false },
            { label: 'ID', prop: "emplid", isShow: true, notChecked: true, width: '120', needAtag: false },
            { label: '姓名', prop: "name", isShow: true, handle: true, width: '90', needAtag: true },
            { label: '性别', prop: "sex_descr", isShow: true, width: '80', class: 'width80' },
            { label: '部门', prop: "dept_descr", isShow: true, width: '180' },
            { label: '职位', prop: "position_desc", isShow: true, width: '200' },
            { label: '入职时间', prop: "service_dt", isShow: true, width: '120', class: 'width90', handle: true },
            { label: '出生日期', prop: "birthdate", isShow: true, width: '120', class: 'width90', handle: true },
            { label: '出生地', prop: "birthplace", isShow: true, width: '100', class: 'width90', handle: true },
            { label: '政治面貌', prop: "political_sta_chn", isShow: true, width: '120' },
            { label: '参加工作时间', prop: "start_dt_chn", isShow: true, width: '120', handle: true },
            { label: '最高学历', prop: "highest_edu", isShow: true, width: '120' },
            { label: '最高学位', prop: "highest_deg", isShow: true, width: '120' },
            { label: '毕业院校', prop: "school_descr", isShow: true, width: '120' },
            { label: '所学专业', prop: "major_descr", isShow: true, width: '120' }
        ];
        self.tableOption = JSON.parse(JSON.stringify(self.colTotalList));
        self.assignTitles();
    },
    mounted: function () {
        var self = this;
        this.searchDeptCategory = this.$route.query.q;
        var params = {
            employeeId: "",
            deptCategory: '',
            deptDescr: this.leaderSec,
            name: this.searchText,
            page: {
                pageSize: 24,
                pageNum: 1
            }
        };
        this.getLeaderListCommonAjax();
//      this.Axios.Post(this.URL.getDeptListByType.url, params).then(function (res) {
//          var arr = res.data.datas;
//          for (let i = 0; i < res.data.datas[i].length; i++) {
//              let thousands5 = res.data.datas[i].service_dt;//金额 //千分位
//              res.data.datas[i].service_dt = paraseInt(thousands5).toLocaleString();
//          }
//          arr && arr.unshift({ "descr": "全部", "total": 1, "deptid": "" })
//          self.unitList = res.data.datas;
//      })
        window.addEventListener("scroll", this.scrollFunc);
    },
    beforeDestroy: function () {
        window.removeEventListener("scroll", this.scrollFunc);
    },
    components: {
        cardLeader,
        searchBox,
        searchCol
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                this.searchDeptCategory = this.$route.query.q;
                var self = this;
                this.searchText = '';
                this.leaderSec = '';
                this.radio3 = '员工列表';
                this.clearData();
                this.cardPageSize = 30;
                this.cardPageNum = 1;
                this.currentPage = 1;
                this.pageSizeTable = 10;
                this.cardList = [];
                this.unitTableList = null;
                var params = {
                    employeeId: "",
                    deptCategory: this.searchDeptCategory,
                    deptDescr: this.leaderSec,
                    name: this.searchText
                };
                this.getLeaderListCommonAjax();
                this.Axios.Post(this.URL.getDeptListByType.url, params).then(function (res) {
                    var arr = res.data.datas;
                    arr.unshift({ "descr": "全部", "total": 1, "deptid": "" })
                    self.unitList = res.data.datas;
                })
            }
        }
    },
    filters: {
        //   handleBirthdate:function(value){
        //       if (!value) {return}
        //       return value.split(' ')[0];
        //   },
        //   handleDate:function(value){
        //       if (!value) {return}
        //       return value.split(' ')[0].replace(/-/g,function(){return '.'});
        //   },
        //   handleWorkDate:function(value){
        //       if (!value) {return}
        //       return value.split(' ')[0].replace(/-/,function(){return '.'}).split('-')[0];
        //   }
    }
}
</script>

<style scoped>
.staffList .tableDiv {
  padding: 0 10px;
  margin-top: 20px;
}
.staffList .paginationDiv {
  text-align: right;
  padding: 20px 0;
}
.staffList .first-title h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.staffList .first-title h3 small {
  font-size: 65%;
  font-weight: normal;
  line-height: 1;
  color: #777;
  margin-left: 5px;
}
.staffList .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
}
.content-right {
  float: right;
  margin-top: 17px;
}
.staffList .resumePeo {
  color: #00acd6;
  cursor: pointer;
}
.staffList .select-dept {
  font-size: 14px;
}
.staffList .display-title {
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
  overflow: hidden;
}
.staffList .switch-btn {
  padding: 10px 10px;
}
.staffList .collapse-card {
  position: relative;
  padding: 10px 10px;
  border-bottom: 1px solid #f4f4f4;
}

.staffList .table-container {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
  background-color: #fff;
}
.staffList .unitContainer {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #3c8dbc;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  clear: both;
}
.staffList .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.staffList .third-card .collapse-card .collapse-container {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.staffList .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0px;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
.totalNum {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

/*选项icon样式*/
.staffList .handle-table {
  /*overflow: hidden;*/
  clear: both;
  padding: 20px 20px 30px 20px;
  border-bottom: 1px solid #dfe6ec;
}
.staffList .selectSet {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  clear: both;
  position: relative;
}
.staffList .selectSet .default {
  float: left;
  background-color: #f4f4f4;
  color: #444;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}
.staffList .selectSet .alt {
  margin-right: -1px;
}
.staffList .selectSet a:hover {
  z-index: 4;
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.staffList .selectSet .alt {
  margin-right: -1px;
}

.selectSet .default:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.selectSet .default:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.staffList .downloadTable {
  padding: 7px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  background-color: #00acd6;
  border-color: #269abc;
  color: #fff;
  border-radius: 3px;
  display: inline-block;
}
.staffList .downloadTable:hover {
  background-color: #3c8dbc;
  border-color: #00acd6;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.2s ease;
}
.slide-fade-leave-active {
  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
.staffList .displayShow {
  display: inline-block;
  height: 32px;
}
.staffList .block {
  margin: 15px 5px;
  line-height: 32px;
}
</style>

